<template>
    <div class="common-layout">
    <el-container style="background-color:seashell">
        <!-- 侧边栏 -->
      <el-aside width="150px"><el-row class="tac">
        <el-col :span="50">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="1"
        text-color="#fff"
        style="height: 1000px"
      >
      <!-- 账号头像 -->
      <el-menu-item  style="width: 149px;height: 150px;">
          <span><div class="demo-fit">
    <div v-for="fit in fits" :key="fit" class="block">
      <span class="title">{{ fit }}</span>
      <el-avatar shape="square" :size="115" :fit="fit" :src="url" />
    </div>
  </div></span>
        </el-menu-item>
        <!-- 菜单栏 -->
      <el-menu-item index="1" style="width: 149px">
          <el-icon><icon-menu /></el-icon>
          <span>账号详情</span>
        </el-menu-item>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>资料设置</span>
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon><icon-menu /></el-icon>
          <span>隐私设置</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><icon-menu /></el-icon>
          <span>账号切换</span>
        </el-menu-item>
        <el-menu-item index="5">
          <el-icon><document /></el-icon>
          <span>注销账号</span>
        </el-menu-item>
        <el-divider>
      <el-icon><star-filled /></el-icon>
    </el-divider>
      </el-menu>
    </el-col>
      </el-row>
      </el-aside>
      <!-- 页面头 -->
      <el-container>
        <el-header style="background-color:#545c64; height: 150px;">    </el-header>
  <!-- 主体部分 -->
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'

export default {
  setup() {
    const state = reactive({
      fits: [''],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    })

    const { fits, url } = toRefs(state)

    return {
      fits,
      url
    }
  }
}
</script>


<style scoped>
.demo-fit {
  display: flex;
  text-align: center;
  justify-content: space-between;
}
.demo-fit .block {
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}

.demo-fit .title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}
</style>